<script>
import formRules from '@/views/dormitory/components/ApartmentForm/formRules'

export default {
  components: {

  },
  props: {
    placeholder: {
      type: String
    },
    showSepLine: {
      type: Boolean,
      default: true
    },
    type: {
      type: String
    },
    value: {
      type: String,
      required: true,
      default: ''
    },
    oninput: {
      type: String
    }
  },
  data() {
    return {
      showContent: false
    }
  },
  computed: {
    isPasswordInput() {
      return this.type === 'password'
    },
    inputType() {
      if (!this.isPasswordInput) { return 'text' }

      return this.showContent ? 'text' : 'password'
    },
    suffixIcon() {
      return this.showContent ? 'input-eye-close' : 'input-eye-open'
    },
    inputValue: {
      get() {
        return this.value
      },
      set(v) {
        this.$emit('input', v)
      }
    }
  },
  watch: {
    inputValue() {
      this.onChange()
    }
  },
  mounted() {
    console.log(this.oninput, '--------21212121-------------------')
  },
  methods: {
    toggleContentVisible() {
      this.showContent = !this.showContent
      this.$nextTick(this.focus)
    },
    handleInput(v) {
      this.$emit('input', v)
    },
    focus() {
                this.$refs['input']?.focus?.()
    },
    dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root
      var name = parent.$options.componentName

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent

        if (parent) {
          name = parent.$options.componentName
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params))
      }
    },
    onBlur() {
      this.$emit('blur')
      this.dispatch('ElFormItem', 'el.form.blur', [])
    },
    onChange() {
      this.$emit('change', this.inputValue)
      this.dispatch('ElFormItem', 'el.form.change', [this.inputValue])
    }
  }
}
</script>

<template>
  <div class="k-input">
    <div class="prefix">
      <!-- <svg-icon icon-class="locker" class="icon" /> -->
      <slot name="prefix" />
      <span v-if="showSepLine" class="sep-line" />
    </div>
    <input ref="input" v-model="inputValue" :type="inputType" class="input" :placeholder="placeholder" :oninput="oninput" @blur="onBlur">
    <!-- <div class="suffix"> -->
    <svg-icon v-if="isPasswordInput" :icon-class="suffixIcon" class="icon" style="cursor: pointer;" @click="toggleContentVisible" />
    <slot v-else name="suffix" />
    <!-- </div> -->
  </div>
</template>

<style lang="scss">
.el-form-item.is-error {
    .k-input {
        border: 1px solid #f56c6c;
    }
}
.k-input {
    padding: 10px;
    background-color: #F5F7FB;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #F5F7FB;

    .prefix {
        display: flex;
        align-items: center;

        .icon {
            font-size: 20px;

            &::after {
                content: '';
                width: 1px;
                height: 100%;
                display: block;
            }
        }

        .sep-line {
            background-color: #DCDFE6;
            display: inline-block;
            width: 1px;
            height: 20px;
            margin: 0 10px;
        }
    }

    .input {
        flex: 1;
        border: none;
        outline: none;
        background-color: transparent;
        font-size: 14px;
    }
}
</style>
